<template>
    <div :ref="chartsRef" class="charts-box" :style="{height:height,width:width}"/>
</template>

<script>
    import resize from '@/utils/resize'
    export default {
        name: 'echart',
        components: {},
        mixins: [resize],
        props: {
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '100%'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            option: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                chartsRef: `chartsRef-${Math.random()}`,
                chart: null
            }
        },
        watch: {
            option: {
                deep: true,
                handler(val) {
                    if(val){
                        this.$nextTick(() => {
                            this.initChart()
                        })
                    }
                },
                // immediate: true // 允许首次绑定时执行
            }
        },
        mounted() {
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = this.$echarts.init(this.$refs[this.chartsRef])
                this.setOptions(this.option)
            },
            setOptions(option) {
                this.chart.setOption(option)
                let _this = this
                this.chart.on('click', function(params) {
                    _this.$emit('on-click', params)
                })
            }
        }
    }
</script>

<style scoped>
</style>
